<template>
  <div class="page-vision">
    <div class="navbar-wrap">
      <div class="Navbarold">
        <nav>
          <div class="navbar-logo"></div>
          <div class="navbar-title">卖票猫</div>
          <div class="navbar-button">
            <div class="nav-btn">
              <img src="../assets/images/nav-button.png" alt="" />
            </div>
          </div>
        </nav>
      </div>
    </div>
    <div class="switch-tab-bar">
      <div class="nav" v-for="(item,index) in navList" :key="item.id">
        <div :class="['tab-item', {'active':navIndex==index}]" @click="selectNav(index,item.id)">
          <h2>{{item.title}}</h2>
        </div>
      </div>
    </div>
    <van-loading size="24px" v-if="showCon">加载中...</van-loading>
    <section class="videos" v-if="!showCon">
      <div class="video-item" v-for="item in videoList" :key="item.id">
        <div class="con">
          <div class="videoplayer">
            <video src=""></video>
            <img
              class="poster"
              :src="item.images[0].url"
              :alt="item.title"
              v-lazy="item.images[0].url"
            />
            <div class="video-title">
              {{item.title}}
            </div>
            <div class="play-but" @click="goPlay(item.id)"></div>
            <div class="info-bar clearfix">
              <div class="time" v-if="item.video" >{{time(item.video.dur)}}</div>
            </div>
          </div>
        </div>
        <div class="video-info">
          <div class="left">
            <img
              class="user-avatar"
              :src="item.user.avatarurl"
              alt=""
            />
            <div class="user-nickname">{{item.user.nickName}}</div>
          </div>
          <div class="right">
            <div :class="['video-praise',{'praise':item.alreadyUp}]" 
            @click="clickUp(item.id)"
            >{{item.upCount}} <span :class="['num',{'action':item.alreadyUp},{'stopain':item.type}]" ref="praiseDOM">+<i>1</i></span></div>
            <div class="comment">
              <div class="video-comment">{{item.commentCount}}</div>
            </div>
            <div class="share">
              <div class="video-share"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <bottom-tabs :index="1"></bottom-tabs>
  </div>
</template>

<script>
import BottomTabs from "../components/BottomTabs.vue";
import { useStore } from 'vuex'
import { getMoreVideos } from '../api/video'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
export default {
  components:{
        BottomTabs
  },

  setup() {
    const router = useRouter()
    const store = useStore()
    const showCon = ref(true)

    //获取导航栏信息
    let navData = JSON.parse(window.localStorage.getItem('typelist'))==null?null:JSON.parse(window.localStorage.getItem('typelist'))

    //导航栏配置
    let navList = ref([
      {
        id:4,
        title:"推荐"
      },
      {
        id:1331498,
        title:"热片解读"
      },
      {
        id:1067226,
        title:"预告片"
      },
      {
        id:1074953,
        title:"速看电影"
      },
      {
        id:1307354,
        title:"娱乐"
      },
    ])
    let navIndex = navData==null?ref(0):ref(navData.index)
    let navId = navData==null?ref(4):ref(navData.id)

    //选择视频类型
    let selectNav = (index,id) =>{
      showCon.value=true
      navIndex.value=index
      navId.value=id
      const temp = {
        id,
        index
      }
      // 保存导航栏信息
      window.localStorage.setItem("typelist",JSON.stringify(temp))
      // 调用获取数据方法
      getFeedsFun(navId.value)
    }

    //首页推荐
    let videoList = ref([])

    //获取电影列表数据
    let getFeedsFun = (id) =>{
      getMoreVideos(id).then((data)=>{
      // console.log(data);
      if (data) {
        setTimeout(() => {
          showCon.value=false
        }, 500);
      }
      actionstop.value=true
      videoList.value=data.data.feeds
        let videoInfoData = JSON.parse(window.localStorage.getItem('videoInfo'))
        let commitData = JSON.parse(window.localStorage.getItem('commitlist'))
          if (videoInfoData!=null) {
            videoInfoList.value=videoInfoData
              videoList.value.forEach(item=>{
                videoInfoData.forEach(k=>{
                  item.type=actionstop.value
                  if (item.id==k.id) {
                    item.alreadyUp=k.alreadyUp
                    item.upCount=k.upCount
                  }
                })
              })
          }
          if (commitData!=null) {
              videoList.value.forEach(item=>{
                item.commentCount=0
                commitData.forEach(k=>{
                  if (item.id==k.id) {
                     item.commentCount=k.commiInfo.length
                  }
                })
              })
          }
          // console.log(videoList.value);
    })
    }
    getFeedsFun(navId.value)


    //过滤时间
    let time = (value) =>{
      let leftTime = parseInt(value/60)>=10?parseInt(value/60):'0'+parseInt(value/60)
      let rightTime = value%60>=10?value%60:'0'+value%60
      return `${leftTime}:${rightTime}`
    }

    //跳转详情
    let goPlay = (id) =>{
      store.commit('setVideoId',id)
      router.push({
        path:"/videodetail",
        query:{
          id:navId.value
        }
      })
    }

    //点赞数据
    let videoInfoList = ref([])
    let actionstop = ref(true)
    let praiseDOM =ref(null)

    // 点赞
    let clickUp = (id) =>{
      let token = window.localStorage.getItem("token");
      if (!token) {
        router.push("/login");
        return
      }

      let allvideoInfo = JSON.parse(window.localStorage.getItem('videoInfo'))==null?[]:JSON.parse(window.localStorage.getItem('videoInfo'))
      let i = allvideoInfo.findIndex(item=>item.id==id)
      // console.log(i);
      let index = videoList.value.findIndex(item=>item.id==id)
      videoList.value[index].alreadyUp=!videoList.value[index].alreadyUp
      if (videoList.value[index].alreadyUp) {
        videoList.value[index].type=false
        videoList.value[index].upCount=videoList.value[index].upCount+1
        if (i==-1) {
          let temp = {
            id,
            alreadyUp:videoList.value[index].alreadyUp,
            upCount:videoList.value[index].upCount,
            commentCount:videoList.value[index].commentCount,
          }
          videoInfoList.value=[...videoInfoList.value,temp]
        }else{
            videoInfoList.value[i]=allvideoInfo[i]
        }
        window.localStorage.setItem('videoInfo',JSON.stringify(videoInfoList.value))
      }else{
        videoList.value[index].upCount=videoList.value[index].upCount-1
        if (videoInfoList.value.length) {
          let i = videoInfoList.value.findIndex(item=>item.id==id)
          if (videoInfoList.value[i].id==id) {
            videoInfoList.value.splice(i,1)
            window.localStorage.setItem('videoInfo',JSON.stringify(videoInfoList.value))
          }
        }
      }
    }

      return {
        videoList,
        navList,
        navIndex,
        navId,
        getFeedsFun,
        selectNav,
        time,
        goPlay,
        showCon,
        clickUp,
        praiseDOM,
        actionstop
      }
  },

}
</script>

<style lang="less" scoped>
.page-vision{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
// 头部
.navbar-wrap {
  width: 100%;

  .Navbarold {
    background-color: #e54847;
    height: 38px;
    padding: 6px;
    position: relative;
    overflow: hidden;

    & > nav {
      width: 100%;
      height: 100%;

      .navbar-logo {
        width: 26.7%;
        height: 38px;
        float: left;
      }

      .navbar-title {
        width: 44.9%;
        height: 38px;
        font-size: 18px;
        color: #fff;
        text-align: center;
        line-height: 38px;
        float: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
      }

      .navbar-button {
        position: relative;
        width: 26.7%;
        height: 38px;
        float: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .nav-btn {
          width: 17px;
          height: 16px;
          margin-right: 6px;
          text-align: right;

          & > img {
            width: 17px;
            height: 16px;
            display: block;
          }
        }
      }
    }
  }
}
// 导航
.switch-tab-bar {
  width: 100%;
  height: 45px;
  position: relative;
  white-space: nowrap;
  overflow: scroll;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;

  .nav {
    display: inline-block;
    .tab-item {
      color: #333;
      height: 45px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 12px;
      position: relative;

      & > h2 {
        font-size: 15px;
        line-height: 24px;
        font-weight: 450;
      }
    }

    .active {
      & > h2 {
        font-size: 17px;
      }

      &::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 3px;
        width: 20px;
        height: 3px;
        border-radius: 1px;
        background: #f03d37;
      }
    }
  }

  &::-webkit-scrollbar {
    display: none;
  }
}
// 内容
.videos {
  position: relative;
  overflow: hidden;
  padding-bottom: 48px;
  background-color: #f5f5f5;

  .video-item {
    margin-bottom: 6px;
    position: relative;

    .con {
      .videoplayer {
        position: relative;
        height: 211px;
        overflow: hidden;
        background-color: #000;

        & > video {
          width: 100%;
          height: 100%;
          background-color: #000;
          object-fit: cover;
        }

        .poster {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 234.5px;
        }

        .video-title {
          position: absolute;
          top: 0;
          left: 0;
          font-family: PingFangSC-Medium, serif;
          font-size: 17px;
          color: #fff;
          letter-spacing: 0;
          line-height: 25px;
          z-index: 1;
          margin: 9px 15px 19px 15px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
        }

        .play-but {
          position: absolute;
          left: 50%;
          top: 50%;
          z-index: 10;
          width: 58px;
          height: 58px;
          margin-top: -29px;
          margin-left: -29px;
          background-image: url(../assets/images/video-btn-play.png);
          background-size: contain;
        }

        .info-bar {
          position: absolute;
          left: 0;
          bottom: 0;
          right: 0;
          height: 30px;
          line-height: 30px;
          background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
          color: #fff;
          font-size: 12px;

          .time {
            float: right;
            margin-right: 10px;
          }
        }
      }
    }

    .video-info {
      height: 46px;
      background-color: #fff;
      padding-left: 15px;
      display: flex;
      justify-content: space-between;

      .left {
        height: 100%;
        display: flex;
        align-items: center;

        .user-avatar {
          width: 22px;
          height: 22px;
          border-radius: 50%;
        }

        .user-nickname {
          margin-left: 8px;
          color: #666;
          font-size: 14px;
        }
      }

      .right {
        height: 100%;
        display: flex;
        align-items: center;

        .video-praise {
          background: url(../assets/images/video-praise.png) no-repeat 0;
          background-size: 18px 18px;
          font-size: 12px;
          padding-left: 23px;
          padding-right: 5px;
          height: 35px;
          line-height: 35px;
          margin-right: 26.5px;
          position: relative;

          .num{
            position: absolute;
            left: -16px;
            top: -2px;
            font-size: 13px;
            color: #f03d37;
            display: none;
            z-index: 9;
            animation: animation 1.2s ease-in-out 0s;
            animation-iteration-count:1;
            animation-fill-mode:forwards;

            &>i{
              font-weight: bold;
            }
          }
          .action{
            animation-play-state:running;
            display: block;
          }
          .stopain{
            animation-play-state:paused;
            display: none;
          }
        }
        @keyframes animation {
            from {
              transform: translateY(0px);
              opacity: 1;
            }
            to {
              transform: translateY(-20px);
              opacity: 0;
            }
        }
        .praise {
          background-image: url("../assets/images/video-praised.png");
        }

        .comment {
          .video-comment {
            background: url(../assets/images/video-comment.png) no-repeat 0;
            background-size: 18px 18px;
            font-size: 12px;
            padding-left: 23px;
            padding-right: 5px;
            height: 35px;
            line-height: 35px;
            margin-right: 12px;
            color: #666;
          }
        }
        .share {
          display: inline-block;
          .video-share {
            background: url(../assets/images/video-share.png) no-repeat 50%;
            background-size: 18px 18px;
            width: 18px;
            height: 35px;
            padding: 0 7.5px;
            margin-right: 7.5px;
          }
        }
      }
    }
  }
}
&::-webkit-scrollbar {
    display: none;
}
}
::v-deep .van-loading{
   width: 100%;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center; 
}
</style>